﻿<!DOCTYPE html>
<!-- 
| - - Motion.Euzo.Ca - - - Motion and M+ from euzo.ca - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
-->
<html>
<head>
    <title>Test the splitter tag</title>
    <!-- 
    Style sheets. 
    -->    
    <link href="../Motion/User Interface/Fonts/Fonts.css" rel="stylesheet" type="text/css" />
    <link href="../Motion/User Interface/Framework/Splitter/Splitter.css" rel="stylesheet" type="text/css" />
    <!--  
    Application scripts.    
    -->
    <script src="../Motion/User Interface/Framework/Document.js" type="text/javascript"></script>
    <script type="text/ecmascript">
        if (!document.IsGoogleChrome())
        {
            alert('This is not Google Chrome, the page may not work correctly.')
        }
    </script>
    <script src="../Motion/User Interface/Framework/Splitter/Splitter.js" type="text/ecmascript">        
    </script>
</head>
<body>
    <p style="text-align:center">
        Testing 123</p>
    <div style="position: absolute; left: 100px; right: 100px; width: 500px; height: 600px; top: 100px; border: 1px solid black">
        <div style="height: 50%;">
            This is panel 1</div>
        <splitter direction="vertical"></splitter>
        <div style="height: 50%;">
            This is panel 2</div>
    </div>
    <div style="position: absolute; left: 700px; right: 100px; width: 500px; height: 600px; top: 100px; border: 1px solid black; ">
        <div style="min-width:50px; height: 100%; width: 50%; float: left;">
            This is panel 1</div>
        <splitter direction="horizontal" ></splitter>
        <div style="min-width:50px; height: 100%; width: 48%; float: left; ">
            This is panel 2</div>
    </div>
</body>
</html>
